<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生宿舍维修管理系统</title>
    <!-- 引入 Skeleton CSS 国内源 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/skeleton/2.0.4/skeleton.min.css">
    <style>
        body {
            display: flex;
        }

        .sidebar {
            width: 20%;
            height: 100vh;
            background-color: #f4f4f4;
            padding: 20px;
        }

        .sidebar a {
            display: block;
            margin-bottom: 10px;
            color: #333;
            text-decoration: none;
        }

        .sidebar a.active {
            font-weight: bold;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* 添加样式隐藏模态框 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .modal-footer {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <a href="#" class="active" onclick="openTab('repairRequests')">维修请求</a>
        <a href="#" onclick="openTab('repairRecords')">维修记录</a>
        <a href="#" onclick="openTab('maintenanceStaff')">维修人员</a>
        <a href="#" onclick="openTab('dormitories')">宿舍信息</a>
        <a href="#" onclick="openTab('equipment')">设备信息</a>
    </div>
    <div class="main-content">
        <!-- 维修请求 -->
        <div id="repairRequests" class="tab-content active">
            <h2>维修请求</h2>
            <input type="text" id="repairRequestSearch" placeholder="搜索维修请求" oninput="searchRepairRequests()">
            <button class="button-primary" onclick="openAddRepairRequestModal()">添加维修请求</button>
            <table id="repairRequestTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>宿舍号</th>
                        <th>报修时间</th>
                        <th>故障描述</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 维修记录 -->
        <div id="repairRecords" class="tab-content">
            <h2>维修记录</h2>
            <input type="text" id="repairRecordSearch" placeholder="搜索维修记录" oninput="searchRepairRecords()">
            <button class="button-primary" onclick="openAddRepairRecordModal()">添加维修记录</button>
            <table id="repairRecordTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>维修请求 ID</th>
                        <th>维修人员</th>
                        <th>维修时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 维修人员 -->
        <div id="maintenanceStaff" class="tab-content">
            <h2>维修人员</h2>
            <input type="text" id="maintenanceStaffSearch" placeholder="搜索维修人员" oninput="searchMaintenanceStaff()">
            <button class="button-primary" onclick="openAddMaintenanceStaffModal()">添加维修人员</button>
            <table id="maintenanceStaffTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>联系方式</th>
                        <th>入职时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 宿舍信息 -->
        <div id="dormitories" class="tab-content">
            <h2>宿舍信息</h2>
            <input type="text" id="dormitorySearch" placeholder="搜索宿舍信息" oninput="searchDormitories()">
            <button class="button-primary" onclick="openAddDormitoryModal()">添加宿舍信息</button>
            <table id="dormitoryTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>宿舍号</th>
                        <th>入住人数</th>
                        <th>负责人</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 设备信息 -->
        <div id="equipment" class="tab-content">
            <h2>设备信息</h2>
            <input type="text" id="equipmentSearch" placeholder="搜索设备信息" oninput="searchEquipment()">
            <button class="button-primary" onclick="openAddEquipmentModal()">添加设备信息</button>
            <table id="equipmentTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>设备名称</th>
                        <th>所在宿舍</th>
                        <th>购买时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- 维修请求添加/编辑模态框 -->
    <div id="repairRequestModal" class="modal">
        <div class="modal-content">
            <h4>添加/编辑维修请求</h4>
            <input type="hidden" id="repairRequestId">
            <label for="repairRequestDormitory">宿舍号</label>
            <input type="text" id="repairRequestDormitory">
            <label for="repairRequestTime">报修时间</label>
            <input type="datetime-local" id="repairRequestTime">
            <label for="repairRequestDescription">故障描述</label>
            <textarea id="repairRequestDescription"></textarea>
        </div>
        <div class="modal-footer">
            <a href="#" class="button" onclick="closeModal('repairRequestModal')">关闭</a>
            <a href="#" class="button-primary" onclick="saveRepairRequest()">保存</a>
        </div>
    </div>

    <!-- 维修记录添加/编辑模态框 -->
    <div id="repairRecordModal" class="modal">
        <div class="modal-content">
            <h4>添加/编辑维修记录</h4>
            <input type="hidden" id="repairRecordId">
            <label for="repairRecordRequestId">维修请求 ID</label>
            <input type="text" id="repairRecordRequestId">
            <label for="repairRecordStaff">维修人员</label>
            <input type="text" id="repairRecordStaff">
            <label for="repairRecordTime">维修时间</label>
            <input type="datetime-local" id="repairRecordTime">
        </div>
        <div class="modal-footer">
            <a href="#" class="button" onclick="closeModal('repairRecordModal')">关闭</a>
            <a href="#" class="button-primary" onclick="saveRepairRecord()">保存</a>
        </div>
    </div>

    <!-- 维修人员添加/编辑模态框 -->
    <div id="maintenanceStaffModal" class="modal">
        <div class="modal-content">
            <h4>添加/编辑维修人员</h4>
            <input type="hidden" id="maintenanceStaffId">
            <label for="maintenanceStaffName">姓名</label>
            <input type="text" id="maintenanceStaffName">
            <label for="maintenanceStaffContact">联系方式</label>
            <input type="text" id="maintenanceStaffContact">
            <label for="maintenanceStaffHireDate">入职时间</label>
            <input type="datetime-local" id="maintenanceStaffHireDate">
        </div>
        <div class="modal-footer">
            <a href="#" class="button" onclick="closeModal('maintenanceStaffModal')">关闭</a>
            <a href="#" class="button-primary" onclick="saveMaintenanceStaff()">保存</a>
        </div>
    </div>

    <!-- 宿舍信息添加/编辑模态框 -->
    <div id="dormitoryModal" class="modal">
        <div class="modal-content">
            <h4>添加/编辑宿舍信息</h4>
            <input type="hidden" id="dormitoryId">
            <label for="dormitoryNumber">宿舍号</label>
            <input type="text" id="dormitoryNumber">
            <label for="dormitoryOccupancy">入住人数</label>
            <input type="number" id="dormitoryOccupancy">
            <label for="dormitoryResponsible">负责人</label>
            <input type="text" id="dormitoryResponsible">
        </div>
        <div class="modal-footer">
            <a href="#" class="button" onclick="closeModal('dormitoryModal')">关闭</a>
            <a href="#" class="button-primary" onclick="saveDormitory()">保存</a>
        </div>
    </div>

    <!-- 设备信息添加/编辑模态框 -->
    <div id="equipmentModal" class="modal">
        <div class="modal-content">
            <h4>添加/编辑设备信息</h4>
            <input type="hidden" id="equipmentId">
            <label for="equipmentName">设备名称</label>
            <input type="text" id="equipmentName">
            <label for="equipmentDormitory">所在宿舍</label>
            <input type="text" id="equipmentDormitory">
            <label for="equipmentPurchaseDate">购买时间</label>
            <input type="datetime-local" id="equipmentPurchaseDate">
        </div>
        <div class="modal-footer">
            <a href="#" class="button" onclick="closeModal('equipmentModal')">关闭</a>
            <a href="#" class="button-primary" onclick="saveEquipment()">保存</a>
        </div>
    </div>

    <script>
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function () {
            initRepairRequests();
            initRepairRecords();
            initMaintenanceStaff();
            initDormitories();
            initEquipment();
        });

        // 打开 tab 页面
        function openTab(tabName) {
            let tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(content => {
                content.classList.remove('active');
            });
            let sidebarLinks = document.querySelectorAll('.sidebar a');
            sidebarLinks.forEach(link => {
                link.classList.remove('active');
            });
            document.getElementById(tabName).classList.add('active');
            document.querySelector(`.sidebar a[onclick="openTab('${tabName}')"]`).classList.add('active');
        }

        // 维修请求管理
        function initRepairRequests() {
            let repairRequests = JSON.parse(localStorage.getItem('repairRequests')) || [
                { id: 1, dormitory: '101', time: '2024-01-01T09:00', description: '灯泡损坏' },
                { id: 2, dormitory: '102', time: '2024-01-02T10:00', description: '水管漏水' },
                { id: 3, dormitory: '103', time: '2024-01-03T11:00', description: '门锁故障' },
                { id: 4, dormitory: '104', time: '2024-01-04T14:00', description: '窗户玻璃破裂' },
                { id: 5, dormitory: '105', time: '2024-01-05T15:00', description: '风扇不转' },
                { id: 6, dormitory: '106', time: '2024-01-06T16:00', description: '马桶堵塞' },
                { id: 7, dormitory: '107', time: '2024-01-07T17:00', description: '空调不制冷' },
                { id: 8, dormitory: '108', time: '2024-01-08T18:00', description: '桌椅损坏' },
                { id: 9, dormitory: '109', time: '2024-01-09T19:00', description: '插座没电' },
                { id: 10, dormitory: '110', time: '2024-01-10T20:00', description: '窗帘杆断裂' }
            ];
            localStorage.setItem('repairRequests', JSON.stringify(repairRequests));
            renderRepairRequests(repairRequests);
        }

        function renderRepairRequests(repairRequests) {
            let table = document.getElementById('repairRequestTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            repairRequests.forEach(request => {
                let row = table.insertRow();
                row.insertCell(0).textContent = request.id;
                row.insertCell(1).textContent = request.dormitory;
                row.insertCell(2).textContent = request.time;
                row.insertCell(3).textContent = request.description;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<a class="button" onclick="openEditRepairRequestModal(${request.id})">编辑</a>
                                         <a class="button" onclick="deleteRepairRequest(${request.id})">删除</a>`;
            });
        }

        function openAddRepairRequestModal() {
            document.getElementById('repairRequestId').value = '';
            document.getElementById('repairRequestDormitory').value = '';
            document.getElementById('repairRequestTime').value = '';
            document.getElementById('repairRequestDescription').value = '';
            document.getElementById('repairRequestModal').style.display = 'block';
        }

        function openEditRepairRequestModal(id) {
            let repairRequests = JSON.parse(localStorage.getItem('repairRequests'));
            let request = repairRequests.find(r => r.id === id);
            document.getElementById('repairRequestId').value = request.id;
            document.getElementById('repairRequestDormitory').value = request.dormitory;
            document.getElementById('repairRequestTime').value = request.time;
            document.getElementById('repairRequestDescription').value = request.description;
            document.getElementById('repairRequestModal').style.display = 'block';
        }

        function saveRepairRequest() {
            let repairRequests = JSON.parse(localStorage.getItem('repairRequests'));
            let id = document.getElementById('repairRequestId').value;
            let dormitory = document.getElementById('repairRequestDormitory').value;
            let time = document.getElementById('repairRequestTime').value;
            let description = document.getElementById('repairRequestDescription').value;
            if (id) {
                let index = repairRequests.findIndex(r => r.id === parseInt(id));
                repairRequests[index] = { id: parseInt(id), dormitory, time, description };
            } else {
                let newId = repairRequests.length > 0 ? Math.max(...repairRequests.map(r => r.id)) + 1 : 1;
                repairRequests.push({ id: newId, dormitory, time, description });
            }
            localStorage.setItem('repairRequests', JSON.stringify(repairRequests));
            renderRepairRequests(repairRequests);
            closeModal('repairRequestModal');
        }

        function deleteRepairRequest(id) {
            let repairRequests = JSON.parse(localStorage.getItem('repairRequests'));
            repairRequests = repairRequests.filter(r => r.id!== id);
            localStorage.setItem('repairRequests', JSON.stringify(repairRequests));
            renderRepairRequests(repairRequests);
        }

        function searchRepairRequests() {
            let searchTerm = document.getElementById('repairRequestSearch').value.toLowerCase();
            let repairRequests = JSON.parse(localStorage.getItem('repairRequests'));
            let filteredRequests = repairRequests.filter(request => request.dormitory.toLowerCase().includes(searchTerm) || request.description.toLowerCase().includes(searchTerm));
            renderRepairRequests(filteredRequests);
        }

        // 维修记录管理
        function initRepairRecords() {
            let repairRecords = JSON.parse(localStorage.getItem('repairRecords')) || [
                { id: 1, requestId: 1, staff: '张三', time: '2024-01-02T10:00' },
                { id: 2, requestId: 2, staff: '李四', time: '2024-01-03T11:00' },
                { id: 3, requestId: 3, staff: '王五', time: '2024-01-04T14:00' },
                { id: 4, requestId: 4, staff: '赵六', time: '2024-01-05T15:00' },
                { id: 5, requestId: 5, staff: '孙七', time: '2024-01-06T16:00' },
                { id: 6, requestId: 6, staff: '周八', time: '2024-01-07T17:00' },
                { id: 7, requestId: 7, staff: '吴九', time: '2024-01-08T18:00' },
                { id: 8, requestId: 8, staff: '郑十', time: '2024-01-09T19:00' },
                { id: 9, requestId: 9, staff: '王十一', time: '2024-01-10T20:00' },
                { id: 10, requestId: 10, staff: '李十二', time: '2024-01-11T21:00' }
            ];
            localStorage.setItem('repairRecords', JSON.stringify(repairRecords));
            renderRepairRecords(repairRecords);
        }

        function renderRepairRecords(repairRecords) {
            let table = document.getElementById('repairRecordTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            repairRecords.forEach(record => {
                let row = table.insertRow();
                row.insertCell(0).textContent = record.id;
                row.insertCell(1).textContent = record.requestId;
                row.insertCell(2).textContent = record.staff;
                row.insertCell(3).textContent = record.time;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<a class="button" onclick="openEditRepairRecordModal(${record.id})">编辑</a>
                                         <a class="button" onclick="deleteRepairRecord(${record.id})">删除</a>`;
            });
        }

        function openAddRepairRecordModal() {
            document.getElementById('repairRecordId').value = '';
            document.getElementById('repairRecordRequestId').value = '';
            document.getElementById('repairRecordStaff').value = '';
            document.getElementById('repairRecordTime').value = '';
            document.getElementById('repairRecordModal').style.display = 'block';
        }

        function openEditRepairRecordModal(id) {
            let repairRecords = JSON.parse(localStorage.getItem('repairRecords'));
            let record = repairRecords.find(r => r.id === id);
            document.getElementById('repairRecordId').value = record.id;
            document.getElementById('repairRecordRequestId').value = record.requestId;
            document.getElementById('repairRecordStaff').value = record.staff;
            document.getElementById('repairRecordTime').value = record.time;
            document.getElementById('repairRecordModal').style.display = 'block';
        }

        function saveRepairRecord() {
            let repairRecords = JSON.parse(localStorage.getItem('repairRecords'));
            let id = document.getElementById('repairRecordId').value;
            let requestId = document.getElementById('repairRecordRequestId').value;
            let staff = document.getElementById('repairRecordStaff').value;
            let time = document.getElementById('repairRecordTime').value;
            if (id) {
                let index = repairRecords.findIndex(r => r.id === parseInt(id));
                repairRecords[index] = { id: parseInt(id), requestId, staff, time };
            } else {
                let newId = repairRecords.length > 0 ? Math.max(...repairRecords.map(r => r.id)) + 1 : 1;
                repairRecords.push({ id: newId, requestId, staff, time });
            }
            localStorage.setItem('repairRecords', JSON.stringify(repairRecords));
            renderRepairRecords(repairRecords);
            closeModal('repairRecordModal');
        }

        function deleteRepairRecord(id) {
            let repairRecords = JSON.parse(localStorage.getItem('repairRecords'));
            repairRecords = repairRecords.filter(r => r.id!== id);
            localStorage.setItem('repairRecords', JSON.stringify(repairRecords));
            renderRepairRecords(repairRecords);
        }

        function searchRepairRecords() {
            let searchTerm = document.getElementById('repairRecordSearch').value.toLowerCase();
            let repairRecords = JSON.parse(localStorage.getItem('repairRecords'));
            let filteredRecords = repairRecords.filter(record => record.requestId.toString().includes(searchTerm) || record.staff.toLowerCase().includes(searchTerm));
            renderRepairRecords(filteredRecords);
        }

        // 维修人员管理
        function initMaintenanceStaff() {
            let maintenanceStaff = JSON.parse(localStorage.getItem('maintenanceStaff')) || [
                { id: 1, name: '张三', contact: '13800138001', hireDate: '2024-01-01T09:00' },
                { id: 2, name: '李四', contact: '13800138002', hireDate: '2024-01-02T10:00' },
                { id: 3, name: '王五', contact: '13800138003', hireDate: '2024-01-03T11:00' },
                { id: 4, name: '赵六', contact: '13800138004', hireDate: '2024-01-04T14:00' },
                { id: 5, name: '孙七', contact: '13800138005', hireDate: '2024-01-05T15:00' },
                { id: 6, name: '周八', contact: '13800138006', hireDate: '2024-01-06T16:00' },
                { id: 7, name: '吴九', contact: '13800138007', hireDate: '2024-01-07T17:00' },
                { id: 8, name: '郑十', contact: '13800138008', hireDate: '2024-01-08T18:00' },
                { id: 9, name: '王十一', contact: '13800138009', hireDate: '2024-01-09T19:00' },
                { id: 10, name: '李十二', contact: '13800138010', hireDate: '2024-01-10T20:00' }
            ];
            localStorage.setItem('maintenanceStaff', JSON.stringify(maintenanceStaff));
            renderMaintenanceStaff(maintenanceStaff);
        }

        function renderMaintenanceStaff(maintenanceStaff) {
            let table = document.getElementById('maintenanceStaffTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            maintenanceStaff.forEach(staff => {
                let row = table.insertRow();
                row.insertCell(0).textContent = staff.id;
                row.insertCell(1).textContent = staff.name;
                row.insertCell(2).textContent = staff.contact;
                row.insertCell(3).textContent = staff.hireDate;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<a class="button" onclick="openEditMaintenanceStaffModal(${staff.id})">编辑</a>
                                         <a class="button" onclick="deleteMaintenanceStaff(${staff.id})">删除</a>`;
            });
        }

        function openAddMaintenanceStaffModal() {
            document.getElementById('maintenanceStaffId').value = '';
            document.getElementById('maintenanceStaffName').value = '';
            document.getElementById('maintenanceStaffContact').value = '';
            document.getElementById('maintenanceStaffHireDate').value = '';
            document.getElementById('maintenanceStaffModal').style.display = 'block';
        }

        function openEditMaintenanceStaffModal(id) {
            let maintenanceStaff = JSON.parse(localStorage.getItem('maintenanceStaff'));
            let staff = maintenanceStaff.find(s => s.id === id);
            document.getElementById('maintenanceStaffId').value = staff.id;
            document.getElementById('maintenanceStaffName').value = staff.name;
            document.getElementById('maintenanceStaffContact').value = staff.contact;
            document.getElementById('maintenanceStaffHireDate').value = staff.hireDate;
            document.getElementById('maintenanceStaffModal').style.display = 'block';
        }

        function saveMaintenanceStaff() {
            let maintenanceStaff = JSON.parse(localStorage.getItem('maintenanceStaff'));
            let id = document.getElementById('maintenanceStaffId').value;
            let name = document.getElementById('maintenanceStaffName').value;
            let contact = document.getElementById('maintenanceStaffContact').value;
            let hireDate = document.getElementById('maintenanceStaffHireDate').value;
            if (id) {
                let index = maintenanceStaff.findIndex(s => s.id === parseInt(id));
                maintenanceStaff[index] = { id: parseInt(id), name, contact, hireDate };
            } else {
                let newId = maintenanceStaff.length > 0 ? Math.max(...maintenanceStaff.map(s => s.id)) + 1 : 1;
                maintenanceStaff.push({ id: newId, name, contact, hireDate });
            }
            localStorage.setItem('maintenanceStaff', JSON.stringify(maintenanceStaff));
            renderMaintenanceStaff(maintenanceStaff);
            closeModal('maintenanceStaffModal');
        }

        function deleteMaintenanceStaff(id) {
            let maintenanceStaff = JSON.parse(localStorage.getItem('maintenanceStaff'));
            maintenanceStaff = maintenanceStaff.filter(s => s.id!== id);
            localStorage.setItem('maintenanceStaff', JSON.stringify(maintenanceStaff));
            renderMaintenanceStaff(maintenanceStaff);
        }

        function searchMaintenanceStaff() {
            let searchTerm = document.getElementById('maintenanceStaffSearch').value.toLowerCase();
            let maintenanceStaff = JSON.parse(localStorage.getItem('maintenanceStaff'));
            let filteredStaff = maintenanceStaff.filter(staff => staff.name.toLowerCase().includes(searchTerm) || staff.contact.includes(searchTerm));
            renderMaintenanceStaff(filteredStaff);
        }

        // 宿舍信息管理
        function initDormitories() {
            let dormitories = JSON.parse(localStorage.getItem('dormitories')) || [
                { id: 1, number: '101', occupancy: 4, responsible: '学生 A' },
                { id: 2, number: '102', occupancy: 4, responsible: '学生 B' },
                { id: 3, number: '103', occupancy: 4, responsible: '学生 C' },
                { id: 4, number: '104', occupancy: 4, responsible: '学生 D' },
                { id: 5, number: '105', occupancy: 4, responsible: '学生 E' },
                { id: 6, number: '106', occupancy: 4, responsible: '学生 F' },
                { id: 7, number: '107', occupancy: 4, responsible: '学生 G' },
                { id: 8, number: '108', occupancy: 4, responsible: '学生 H' },
                { id: 9, number: '109', occupancy: 4, responsible: '学生 I' },
                { id: 10, number: '110', occupancy: 4, responsible: '学生 J' }
            ];
            localStorage.setItem('dormitories', JSON.stringify(dormitories));
            renderDormitories(dormitories);
        }

        function renderDormitories(dormitories) {
            let table = document.getElementById('dormitoryTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            dormitories.forEach(dormitory => {
                let row = table.insertRow();
                row.insertCell(0).textContent = dormitory.id;
                row.insertCell(1).textContent = dormitory.number;
                row.insertCell(2).textContent = dormitory.occupancy;
                row.insertCell(3).textContent = dormitory.responsible;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<a class="button" onclick="openEditDormitoryModal(${dormitory.id})">编辑</a>
                                         <a class="button" onclick="deleteDormitory(${dormitory.id})">删除</a>`;
            });
        }

        function openAddDormitoryModal() {
            document.getElementById('dormitoryId').value = '';
            document.getElementById('dormitoryNumber').value = '';
            document.getElementById('dormitoryOccupancy').value = '';
            document.getElementById('dormitoryResponsible').value = '';
            document.getElementById('dormitoryModal').style.display = 'block';
        }

        function openEditDormitoryModal(id) {
            let dormitories = JSON.parse(localStorage.getItem('dormitories'));
            let dormitory = dormitories.find(d => d.id === id);
            document.getElementById('dormitoryId').value = dormitory.id;
            document.getElementById('dormitoryNumber').value = dormitory.number;
            document.getElementById('dormitoryOccupancy').value = dormitory.occupancy;
            document.getElementById('dormitoryResponsible').value = dormitory.responsible;
            document.getElementById('dormitoryModal').style.display = 'block';
        }

        function saveDormitory() {
            let dormitories = JSON.parse(localStorage.getItem('dormitories'));
            let id = document.getElementById('dormitoryId').value;
            let number = document.getElementById('dormitoryNumber').value;
            let occupancy = document.getElementById('dormitoryOccupancy').value;
            let responsible = document.getElementById('dormitoryResponsible').value;
            if (id) {
                let index = dormitories.findIndex(d => d.id === parseInt(id));
                dormitories[index] = { id: parseInt(id), number, occupancy, responsible };
            } else {
                let newId = dormitories.length > 0 ? Math.max(...dormitories.map(d => d.id)) + 1 : 1;
                dormitories.push({ id: newId, number, occupancy, responsible });
            }
            localStorage.setItem('dormitories', JSON.stringify(dormitories));
            renderDormitories(dormitories);
            closeModal('dormitoryModal');
        }

        function deleteDormitory(id) {
            let dormitories = JSON.parse(localStorage.getItem('dormitories'));
            dormitories = dormitories.filter(d => d.id!== id);
            localStorage.setItem('dormitories', JSON.stringify(dormitories));
            renderDormitories(dormitories);
        }

        function searchDormitories() {
            let searchTerm = document.getElementById('dormitorySearch').value.toLowerCase();
            let dormitories = JSON.parse(localStorage.getItem('dormitories'));
            let filteredDormitories = dormitories.filter(dormitory => dormitory.number.toLowerCase().includes(searchTerm) || dormitory.responsible.toLowerCase().includes(searchTerm));
            renderDormitories(filteredDormitories);
        }

        // 设备信息管理
        function initEquipment() {
            let equipment = JSON.parse(localStorage.getItem('equipment')) || [
                { id: 1, name: '空调', dormitory: '101', purchaseDate: '2024-01-01T09:00' },
                { id: 2, name: '电视', dormitory: '102', purchaseDate: '2024-01-02T10:00' },
                { id: 3, name: '冰箱', dormitory: '103', purchaseDate: '2024-01-03T11:00' },
                { id: 4, name: '洗衣机', dormitory: '104', purchaseDate: '2024-01-04T14:00' },
                { id: 5, name: '书桌', dormitory: '105', purchaseDate: '2024-01-05T15:00' },
                { id: 6, name: '衣柜', dormitory: '106', purchaseDate: '2024-01-06T16:00' },
                { id: 7, name: '床', dormitory: '107', purchaseDate: '2024-01-07T17:00' },
                { id: 8, name: '风扇', dormitory: '108', purchaseDate: '2024-01-08T18:00' },
                { id: 9, name: '饮水机', dormitory: '109', purchaseDate: '2024-01-09T19:00' },
                { id: 10, name: '路由器', dormitory: '110', purchaseDate: '2024-01-10T20:00' }
            ];
            localStorage.setItem('equipment', JSON.stringify(equipment));
            renderEquipment(equipment);
        }

        function renderEquipment(equipment) {
            let table = document.getElementById('equipmentTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            equipment.forEach(item => {
                let row = table.insertRow();
                row.insertCell(0).textContent = item.id;
                row.insertCell(1).textContent = item.name;
                row.insertCell(2).textContent = item.dormitory;
                row.insertCell(3).textContent = item.purchaseDate;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<a class="button" onclick="openEditEquipmentModal(${item.id})">编辑</a>
                                         <a class="button" onclick="deleteEquipment(${item.id})">删除</a>`;
            });
        }

        function openAddEquipmentModal() {
            document.getElementById('equipmentId').value = '';
            document.getElementById('equipmentName').value = '';
            document.getElementById('equipmentDormitory').value = '';
            document.getElementById('equipmentPurchaseDate').value = '';
            document.getElementById('equipmentModal').style.display = 'block';
        }

        function openEditEquipmentModal(id) {
            let equipment = JSON.parse(localStorage.getItem('equipment'));
            let item = equipment.find(e => e.id === id);
            document.getElementById('equipmentId').value = item.id;
            document.getElementById('equipmentName').value = item.name;
            document.getElementById('equipmentDormitory').value = item.dormitory;
            document.getElementById('equipmentPurchaseDate').value = item.purchaseDate;
            document.getElementById('equipmentModal').style.display = 'block';
        }

        function saveEquipment() {
            let equipment = JSON.parse(localStorage.getItem('equipment'));
            let id = document.getElementById('equipmentId').value;
            let name = document.getElementById('equipmentName').value;
            let dormitory = document.getElementById('equipmentDormitory').value;
            let purchaseDate = document.getElementById('equipmentPurchaseDate').value;
            if (id) {
                let index = equipment.findIndex(e => e.id === parseInt(id));
                equipment[index] = { id: parseInt(id), name, dormitory, purchaseDate };
            } else {
                let newId = equipment.length > 0 ? Math.max(...equipment.map(e => e.id)) + 1 : 1;
                equipment.push({ id: newId, name, dormitory, purchaseDate });
            }
            localStorage.setItem('equipment', JSON.stringify(equipment));
            renderEquipment(equipment);
            closeModal('equipmentModal');
        }

        function deleteEquipment(id) {
            let equipment = JSON.parse(localStorage.getItem('equipment'));
            equipment = equipment.filter(e => e.id!== id);
            localStorage.setItem('equipment', JSON.stringify(equipment));
            renderEquipment(equipment);
        }

        function searchEquipment() {
            let searchTerm = document.getElementById('equipmentSearch').value.toLowerCase();
            let equipment = JSON.parse(localStorage.getItem('equipment'));
            let filteredEquipment = equipment.filter(item => item.name.toLowerCase().includes(searchTerm) || item.dormitory.toLowerCase().includes(searchTerm));
            renderEquipment(filteredEquipment);
        }

        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }
    </script>
</body>

</html>